<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
  <!-- 1. x, y -->
  <defs>
    <pattern id="xy" width="1" height="1" x="0.1" y="-0.1">
      <rect width="50" height="50" fill="blue"/>
      <rect x="50" width="50" height="50" fill="red"/>
      <rect y="50" width="50" height="50" fill="red"/>
      <rect x="50" y="50" width="50" height="50" fill="blue"/>
    </pattern>
  </defs>
  <g>
    <rect width="100" height="100" stroke="black" fill="url(#xy)"/>
    <g transform="translate(100)">
      <rect width="100" height="100" stroke="black" fill="url(#xy)"/>
    </g>
  </g>
  <!-- 2. width, height -->
  <defs>
    <pattern id="widthHeight" width="1" height="1">
      <rect width="50" height="50" fill="blue"/>
      <rect x="50" width="50" height="50" fill="red"/>
      <rect y="50" width="50" height="50" fill="red"/>
      <rect x="50" y="50" width="50" height="50" fill="blue"/>
    </pattern>
  </defs>
  <g transform="translate(0 100)">
    <rect width="100" height="100" stroke="black" fill="url(#widthHeight)"/>
    <g transform="translate(100)">
      <rect width="100" height="100" stroke="black" fill="url(#widthHeight)"/>
    </g>
  </g>
  <!-- If adding more tests here, be sure to update the viewBox on the root svg
       element -->
</svg>
